<template>
  <el-container>
    <el-main style="padding: 2px 2px 0 2px; margin-left: 6rem">
      <div>
        <el-row>
          <el-col :span="2" class="anchor-column">
            <el-anchor
              :container="containerRef"
              direction="vertical"
              type="underline"
              :offset="30"
            >
              <el-anchor-link
                v-for="link in links"
                :key="link.id"
                :href="link.href"
                :title="link.title"
                :style="{}"
              />
            </el-anchor>
          </el-col>
          <el-col :span="22">
            <div
              ref="containerRef"
              :style="{ height: containerHeight - 55 + 'px', overflowY: 'auto' }"
            >
              <div
                id="part1"
                style="height: 300px; background: rgba(255, 0, 0, 0.02); margin-top: 30px"
              >
                <h4>标题1</h4>

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="Approved by">
                    <el-input
                      v-model="formInline.user"
                      placeholder="Approved by"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="Activity zone">
                    <el-select
                      v-model="formInline.region"
                      placeholder="Activity zone"
                      clearable
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Activity time">
                    <el-date-picker
                      v-model="formInline.date"
                      type="date"
                      placeholder="Pick a date"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">Query</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div
                id="part2"
                style="height: 300px; background: rgba(0, 255, 0, 0.02); margin-top: 30px"
              >
                <h4>标题2</h4>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="Approved by">
                    <el-input
                      v-model="formInline.user"
                      placeholder="Approved by"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="Activity zone">
                    <el-select
                      v-model="formInline.region"
                      placeholder="Activity zone"
                      clearable
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Activity time">
                    <el-date-picker
                      v-model="formInline.date"
                      type="date"
                      placeholder="Pick a date"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">Query</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div
                id="part3"
                style="height: 300px; background: rgba(0, 0, 255, 0.02); margin-top: 30px"
              >
                <h4>标题3</h4>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="Approved by">
                    <el-input
                      v-model="formInline.user"
                      placeholder="Approved by"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="Activity zone">
                    <el-select
                      v-model="formInline.region"
                      placeholder="Activity zone"
                      clearable
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Activity time">
                    <el-date-picker
                      v-model="formInline.date"
                      type="date"
                      placeholder="Pick a date"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">Query</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div
                id="part4"
                style="height: 300px; background: rgba(255, 0, 0, 0.02); margin-top: 30px"
              >
                <h4>标题4</h4>

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="Approved by">
                    <el-input
                      v-model="formInline.user"
                      placeholder="Approved by"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="Activity zone">
                    <el-select
                      v-model="formInline.region"
                      placeholder="Activity zone"
                      clearable
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Activity time">
                    <el-date-picker
                      v-model="formInline.date"
                      type="date"
                      placeholder="Pick a date"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">Query</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div
                id="part5"
                style="height: 300px; background: rgba(255, 0, 0, 0.02); margin-top: 30px"
              >
                <h4>标题5</h4>

                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="Approved by">
                    <el-input
                      v-model="formInline.user"
                      placeholder="Approved by"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item label="Activity zone">
                    <el-select
                      v-model="formInline.region"
                      placeholder="Activity zone"
                      clearable
                    >
                      <el-option label="Zone one" value="shanghai" />
                      <el-option label="Zone two" value="beijing" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="Activity time">
                    <el-date-picker
                      v-model="formInline.date"
                      type="date"
                      placeholder="Pick a date"
                      clearable
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">Query</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

const onSubmit = () => {
  console.log("submit!");
};
const containerRef = ref<HTMLElement | null>(null);
const containerHeight = ref(window.innerHeight);
const links = [
  { id: "part1", href: "#part1", title: "标题1" },
  { id: "part2", href: "#part2", title: "标题2" },
  { id: "part3", href: "#part3", title: "标题3" },
  { id: "part4", href: "#part4", title: "标题4" },
  { id: "part5", href: "#part5", title: "标题5" },
];
onMounted(() => {
  const updateContainerHeight = () => {
    containerHeight.value = window.innerHeight;
  };

  window.addEventListener("resize", updateContainerHeight);
  // 当组件销毁时，记得移除事件监听器
  onUnmounted(() => {
    window.removeEventListener("resize", updateContainerHeight);
  });
});
</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
